﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<link rel="stylesheet" type="text/css" href="/UIFramkwork/jquery_easyui_1_3_2/themes/default/easyui.css">   
<link rel="stylesheet" type="text/css" href="/UIFramkwork/jquery_easyui_1_3_2/themes/icon.css">   
<script type="text/javascript" src="/UIFramkwork/jquery_easyui_1_3_2/jquery-1.8.0.min.js"></script>   
<script type="text/javascript" src="/UIFramkwork/jquery_easyui_1_3_2/jquery.easyui.min.js"></script> 
</head>
<body>
  
 

 <div id="tt" class="easyui-tabs" style="width:500px;height:250px;">   
    <div title="Tab1" style="padding:20px;display:none;">   
        tab1    
    </div>   
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;">   
        tab2    
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">   
        tab3    
    </div>   
</div> 
<br />
<a href="#" onclick="test();" >测试</a>


<a href="#" onclick="test2();" >测试2</a>
 
<script type="text/javascript">

//    $('#tt').tabs({
//        border: false,
//        onSelect: function (title) {
//            alert(title + ' is selected');
//        }
//    });







    function test() {

        $('#tt').tabs('add', {
            title: 'NewsTab',
            content: 'Tab Body',
            closable: true,
            tools: [{
                iconCls: 'icon-mini-refresh',
                handler: function () {
                    alert('refresh');
                }
            }]
        });


    }
 
</script>
 
<script type="text/javascript">
 
    function test2() {
        $('#tt').tabs('resize');            // 启用第二个选项卡面板
        
    }





</script>



</body>
</html>
